<template>
  <el-cascader :options="options" v-model="select" @change="handleChange" style="width: 100%"> </el-cascader>
</template>

<script setup>
// 省市区级联选择
// https://www.npmjs.com/package/element-china-area-data
import { regionData, provinceAndCityData, CodeToText, TextToCode } from 'element-china-area-data'

const emit = defineEmits(['change'])
const props = defineProps({
  modelValue: { type: Array, default: () => [] },
  text: { type: Array, default: [] },
  dataType: { type: Number, default: 0 }, // 数据类型 0、省市区三级联动 1、省市二级联动
})

const select = ref(props.modelValue)

watch(
  () => props.text,
  () => {
    select.value = getCode()
  }
)

const initData = () => {
  if (props.text) {
    select.value = getCode()
  }
}

const options = computed(() => {
  if (props.dataType == 0) return regionData
  else if (props.dataType == 1) return provinceAndCityData
})

const handleChange = (code = []) => {
  const province = CodeToText[code[0]]
  const city = CodeToText[code[1]]
  const district = CodeToText[code[2]]
  let text = [province, city, district]

  if (props.dataType == 0) {
    text = [province, city, district]
  } else if (props.dataType == 1) {
    text = [province, city]
  }

  emit('change', {
    code,
    text,
  })
}

function getCode() {
  let code = []
  const [province, city, district] = props.text

  const provinceCode = province ? TextToCode[province].code : null
  const cityCode = city ? TextToCode[province][city].code : null
  const districtCode = district ? TextToCode[province][city][district].code : null

  if (props.dataType == 0) {
    code = [provinceCode, cityCode, districtCode]
  } else if (props.dataType == 1) {
    code = [provinceCode, cityCode]
  }

  return code
}

initData()

// export default {
//   name: 'JaxAreaCascader',
//   props: {
//     modelValue: Object,

//     // 数据类型 0、省市区三级联动 1、省市二级联动
//     dataType: {
//       type: null,
//       default: 0,
//     },
//   },
//   data() {
//     return {
//       addressCode: [],
//       regionData,

//       province: null,
//       city: null,
//       district: null,
//     }
//   },
//   computed: {
//     cascaderData() {
//       if (this.dataType == 0) return regionData
//       else if (this.dataType == 1) return provinceAndCityData
//     },
//   },
//   watch: {
//     modelValue() {
//       if (this.modelValue) {
//         const { province, city, district } = this.modelValue

//         this.province = province
//         this.city = city
//         this.district = district
//       } else {
//         this.province = null
//         this.city = null
//         this.district = null
//       }
//     },
//     province() {
//       this.getCode()
//     },
//     city() {
//       this.getCode()
//     },
//     district() {
//       this.getCode()
//     },
//   },
//   methods: {
//     getCode() {
//       const { province, city, district } = this

//       if (province) {
//         const provinceCode = TextToCode[province].code
//         const cityCode = TextToCode[province][city].code
//         const districtCode = district ? TextToCode[province][city][district].code : null

//         if (this.dataType == 0) {
//           if (districtCode != this.addressCode[2]) {
//             this.addressCode = [provinceCode, cityCode, districtCode]
//           }
//         } else if (this.dataType == 1) {
//           if (cityCode != this.addressCode[1]) {
//             this.addressCode = [provinceCode, cityCode]
//           }
//         }
//       } else {
//         this.addressCode = []
//       }
//     },
//     handleChange(value) {
//       const province = CodeToText[value[0]]
//       const city = CodeToText[value[1]]
//       const district = CodeToText[value[2]]

//       const newData = {
//         ...this.modelValue,
//         province,
//         city,
//         district,
//       }

//       this.$emit('update:modelValue', newData)
//       this.$emit('change', newData)
//     },
//   },
// }
</script>

<style></style>
